import {
  DatePicker,
  Col,
  TimePicker,
  Row,
  DataSet,
} from 'choerodon-ui/pro';
import React, {useMemo} from 'react';
import DateDs from './datePickerDataSet';


function handleChange(value:Date|undefined, oldValue:Date|undefined) {
  console.log(value, oldValue);
}

const datePickerRange: React.FC = ():React.ReactElement => {

  const timeDs:DataSet = useMemo(() => new DataSet(DateDs()), []);

  return (
    <Row gutter={10}>
      <Col span={24}>
        <DatePicker dataSet={timeDs} name="date" placeholder={['Start Date', 'End Date']} />
      </Col>
      <Col span={24}>
        <DatePicker dataSet={timeDs} name="date2" placeholder={['Start Date', 'End Date']} />
      </Col>
      <Col span={24}>
        <DatePicker
          range
          defaultValue={['1986-11-22', new Date()]}
          placeholder={['Start Date', 'End Date']}
          onChange={handleChange}
        />
      </Col>
      <Col span={24}>
        <DatePicker
          range={['start', 'end']}
          defaultValue={{ start: '1987-11-22', end: new Date() }}
          placeholder={['Start Date', 'End Date']}
          onChange={handleChange}
        />
      </Col>
      <Col span={24}>
        <TimePicker dataSet={timeDs} name="time" placeholder="Choose Time" />
      </Col>
      <Col span={24}>
        <DatePicker dataSet={timeDs} name="multipleDate" placeholder="Choose Date" />
      </Col>
    </Row>
  );
};

export default datePickerRange;